<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="left">
                    <div class="title">
                        <p class="titleP">本月最多一次跑问题名单<img src="../../../assets/toMonth.png" alt="" class="toMonth"></p>
                        <p class="allDay">共 <span class="peopleNum">{{ this.AllNum }}</span>人</p>
                    </div>
                    <div class="bkList">
                        <div class="biankuang">
                            <div class="bkLeft">
                                <p><span>{{ this.NO1Name }}</span>:</p>
                            </div>
                            <div class="bkRight">
                                <p class="bkRTopP"><span class="bkRSpan">{{ NO1DayCount }}</span>跑了<span
                                        class="bkRSpan">{{
                                            this.NO1Time }}</span>次<img src="../../../assets/toMonth.png" alt=""
                                        class="bkRIImg"></p>
                                <p class="bkRBottomP">
                                    上月<span class="bkRBottomSpan">5</span>天跑了<span class="bkRBottomSpan">5</span>次
                                </p>
                            </div>
                        </div>
                        <div class="biankuang">
                            <div class="bkLeft">
                                <p><span>{{ this.NO2Name }}</span>:</p>
                            </div>
                            <div class="bkRight">
                                <p class="bkRTopP"><span class="bkRSpan">{{ NO2DayCount }}</span>跑了<span
                                        class="bkRSpan">{{
                                            this.NO2Time }}</span>次<img src="../../../assets/toMonth.png" alt=""
                                        class="bkRIImg"></p>
                                <p class="bkRBottomP">
                                    上月<span class="bkRBottomSpan">5</span>天跑了<span class="bkRBottomSpan">5</span>次
                                </p>
                            </div>
                        </div>
                        <div class="biankuang">
                            <div class="bkLeft">
                                <p><span>{{ this.NO3Name }}</span>:</p>
                            </div>
                            <div class="bkRight">
                                <p class="bkRTopP"><span class="bkRSpan">{{ NO3DayCount }}</span>跑了<span
                                        class="bkRSpan">{{
                                            this.NO3Time }}</span>次<img src="../../../assets/toMonth.png" alt=""
                                        class="bkRIImg"></p>
                                <p class="bkRBottomP">
                                    上月<span class="bkRBottomSpan">5</span>天跑了<span class="bkRBottomSpan">5</span>次
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="rightTitle">
                        <p class="rightTitleP">本月问题人员</p>
                        <img src="../../../assets/jiantou01.png" alt="" class="jiantou01">
                    </div>
                    <div class="rightBkList">
                        <div class="rightBk">
                            <div class="NO1">
                                <p>NO.1</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No1Path})` }"
                                @click="previewImage(No1Path)"></div>

                            <div class="peopleName">
                                <p>{{ this.NO1Name }}</p>
                            </div>
                            <div class="messageList">
                                <p>性别: <span>{{ this.NO1Sex }}</span></p>
                                <p>本月多跑: <span class="time">{{
                                    this.NO1Time }}</span>次</p>
                                <p class="area">多跑区域: <span>综合服务区</span></p>
                            </div>
                        </div>
                        <div class="rightBk">
                            <div class="NO2">
                                <p>NO.2</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No2Path})` }"
                                @click="previewImage(No2Path)"></div>
                            <div class="peopleName">
                                <p>{{ this.NO2Name }}</p>
                            </div>
                            <div class="messageList">
                                <p>性别: <span>{{ this.NO2Sex }}</span></p>
                                <p>本月多跑: <span class="time">{{
                                    this.NO2Time }}</span>次</p>
                                <p class="area">多跑区域: <span>综合服务区</span></p>
                            </div>
                        </div>
                        <div class="rightBk">
                            <div class="NO2">
                                <p>NO.3</p>
                            </div>
                            <div class="peopleImg" :style="{ backgroundImage: `url(${No3Path})` }"
                                @click="previewImage(No3Path)"></div>
                            <div class="peopleName">
                                <p>{{ this.NO3Name }}</p>
                            </div>
                            <div class="messageList">
                                <p>性别: <span>{{ this.NO3Sex }}</span></p>
                                <p>本月多跑: <span class="time">{{
                                    this.NO3Time }}</span>次</p>
                                <p class="area">多跑区域: <span>综合服务区</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showPreview" class="preview-modal" @click="closePreview">
            <img :src="previewImageUrl" alt="预览图片" class="preview-image">
        </div>
    </div>
</template>

<script>

import { maxOneUserWarning, maxOneUserWarningById } from "@/api/warning";
export default {
    name: "problemList",  //本月最多一次跑问题名单
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            showPreview: false,
            previewImageUrl: '',
            currentIndex: 0,
            AllNum: 0,

            NO1Name: '',
            NO1Time: 0,
            NO1Sex: '',
            No1Path: '',
            NO1FaceId: '',
            NO1DayCount: '',

            NO2Name: '',
            NO2Time: 0,
            NO2Sex: '',
            No2Path: '',
            NO2FaceId: '',
            NO2DayCount: '',

            NO3Name: '',
            NO3Time: 0,
            NO3Sex: '',
            No3Path: '',
            NO3FaceId: '',
            NO3DayCount: '',
        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.getList()
            setTimeout(() => {
                this.getNO1LastNum()
                this.getNO2LastNum()
                this.getNO3LastNum()
            }, 500)
            // this.getNO1LastNum()
        }
    },
    mounted() {
        // this.getList()
        // this.getNO1LastNum()
    },
    methods: {

        previewImage(path) {
            this.previewImageUrl = path
            this.showPreview = true;
            console.log('previewImagepath', this.showPreview);
        },
        closePreview() {
            this.showPreview = false;
        },
        //本月最多一次跑问题名单
        async getList() {
            let query = {
                month: this.nowMonth
            }
            let res = await maxOneUserWarning(query);

            if (res.code == 200) {
                // console.log('本月最多一次跑问题名单', res.data);
                this.AllNum = res.data.length
                res.data.forEach((element, index) => {
                    // console.log('index', index);


                    if (index == 0) {
                        // 使用 "-" 分割字符串
                        // const parts = element.split('&&', 2);
                        // console.log('parts', parts);
                        // 解析前半部分为对象
                        // const jsonObject = JSON.parse(parts[0]);
                        // 解析后半部分为数组
                        // const dateArray = JSON.parse(parts[1]);
                        // console.log('Object:', jsonObject);
                        // console.log('Array:', dateArray);
                        this.NO1DayCount = element.frame
                        this.NO1Name = element.userName
                        this.NO1Time = element.frequency
                        if (element.gender == 0) {
                            this.NO1Sex = '未知'
                        }
                        if (element.gender == 1) {
                            this.NO1Sex = '男'
                        }
                        if (element.gender == 2) {
                            this.NO1Sex = '女'
                        }
                        this.No1Path = element.path
                        this.NO1FaceId = element.faceId
                    }
                    if (index == 1) {
                        // 使用 "-" 分割字符串
                        // const parts = element.split('&&', 2);
                        // console.log('parts', parts);
                        // 解析前半部分为对象
                        // const jsonObject = JSON.parse(parts[0]);
                        // 解析后半部分为数组
                        // const dateArray = JSON.parse(parts[1]);

                        this.NO2DayCount = element.frame
                        this.NO2Name = element.userName
                        this.NO2Time = element.frequency
                        if (element.gender == 0) {
                            this.NO2Sex = '未知'
                        }
                        if (element.gender == 1) {
                            this.NO2Sex = '男'
                        }
                        if (element.gender == 2) {
                            this.NO2Sex = '女'
                        }
                        this.No2Path = element.path
                        this.NO2FaceId = element.faceId
                    }
                    if (index == 2) {
                        // 使用 "-" 分割字符串
                        // const parts = element.split('&&', 2);
                        // console.log('parts', parts);
                        // 解析前半部分为对象
                        // const jsonObject = JSON.parse(parts[0]);
                        // 解析后半部分为数组
                        // const dateArray = JSON.parse(parts[1]);

                        this.NO3DayCount = element.frame
                        this.NO3Name = element.userName
                        this.NO3Time = element.frequency
                        if (element.gender == 0) {
                            this.NO3Sex = '未知'
                        }
                        if (element.gender == 1) {
                            this.NO3Sex = '男'
                        }
                        if (element.gender == 2) {
                            this.NO3Sex = '女'
                        }
                        this.No3Path = element.path
                        this.NO3FaceId = element.faceId
                    }
                });
                // this.oldManNum = res.data.length
            }
        },


        //NO1上个月次数
        async getNO1LastNum() {
            console.log('this.NO1FaceId', this.NO1FaceId);

            // if (this.NO1FaceId) {
            let res = await maxOneUserWarningById({
                month: this.nowMonth,
                faceId: this.NO1FaceId
            });

            if (res.code == 200) {
                console.log('NO1上个月次数', res.data);

            }
            // }

        },

        //NO2上个月次数
        async getNO2LastNum() {
            let res = await maxOneUserWarningById({
                month: this.nowMonth,
                faceId: this.NO2FaceId
            });

            if (res.code == 200) {
                console.log('NO2上个月次数', res.data);

            }
        },

        //NO2上个月次数
        async getNO3LastNum() {
            let res = await maxOneUserWarningById({
                month: this.nowMonth,
                faceId: this.NO3FaceId
            });

            if (res.code == 200) {
                console.log('NO3上个月次数', res.data);

            }
        }
    }
};
</script>


<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.preview-modal {
    border: 1px solid red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.preview-image {
    max-width: 90%;
    max-height: 90%;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner12.png);
    display: flex;
    align-items: center;
}

.left {
    // border: 1px solid red;
    width: 30%;
    height: 75%;
    margin-left: 100px;
    margin-top: 80px;
}

.right {
    // border: 1px solid red;
    width: 55%;
    height: 75%;
    margin-left: 100px;
    margin-top: 80px;

    .rightTitle {
        width: 100%;
        height: 20%;
        // border: 1px solid yellow;
        margin-top: -30px;
        z-index: 999;
        position: relative;
        /* 确保子元素的 z-index 生效 */

        .rightTitleP {
            font-size: 42px;
            text-align: center;
            color: #fee17c;
            font-weight: 300;
            letter-spacing: 20px;
            margin-bottom: 15px;
        }

        .jiantou01 {}
    }

    .rightBkList {
        width: 100%;
        // border: 1px solid white;
        height: 87%;
        margin-top: -50px;
        display: flex;
        justify-content: space-between;

        .rightBk {
            width: 334px;
            height: 712px;
            background-image: url(../../../assets/biankuang02.png);
            // background-repeat: no-repeat;
            // background-size: cover;
            display: flex;
            align-items: center;
            flex-direction: column;


            .NO1 {
                width: 242px;
                height: 99px;
                background-image: url(../../../assets/NO1.png);
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 72px;
                    color: white;
                }
            }


            .NO2 {
                width: 242px;
                height: 99px;
                background-image: url(../../../assets/NO2.png);
                margin-top: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 72px;
                    color: white;
                }
            }

            .peopleImg {
                width: 242px;
                height: 242px;
                border: 1px solid white;
                margin-top: 30px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: 0 0;
            }

            .peopleName {
                margin-top: 20px;
                width: 134px;
                height: 55px;
                background-image: url(../../../assets/peopleName.png);
                display: flex;
                justify-content: center;
                align-items: center;

                p {
                    font-size: 26px;
                    color: white;
                    font-weight: 300;
                }
            }

            .messageList {
                width: 242px;
                height: 200px;
                // border: 1px solid red;
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                align-items: start;

                p {
                    font-size: 26px;
                    color: white;
                    font-weight: 300;
                    margin-bottom: 24px;
                }

                .area {
                    // border: 1px solid red;
                    text-align: left;
                }

                .time {
                    font-size: 42px;
                    font-weight: 200;
                    color: #c5423e;
                    margin-right: 5px;
                }
            }
        }
    }
}

.title {
    .titleP {
        color: white;
        font-size: 64px;
        // border: 1px solid white;
        text-align: left;
        padding-left: 60px;
        line-height: 100px;
        margin-top: 0px;

        .toMonth {
            margin-left: 10px;
            margin-bottom: 30px;
        }
    }

    .allDay {
        color: white;
        opacity: 0.8;
        font-size: 42px;
        // border: 1px solid white;
        text-align: left;
        padding-left: 60px;
        margin-top: 10px;

        .peopleNum {
            color: #c5423e;
            font-size: 72px;
            margin-right: 20px;
            margin-left: 10px;
        }
    }
}

.bkList {
    margin-top: 40px;

    .biankuang {
        // border: 1px solid yellow;
        margin-left: 40px;
        margin-bottom: 15px;
        height: 150px;
        width: 470px;
        background-image: url(../../../assets/biankuang01.png);
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;

        .bkLeft {
            height: 100%;
            width: 28%;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;

            p {
                color: white;
                font-size: 32px;
                text-align: center;
            }
        }

        .bkRight {
            height: 100%;
            width: 72%;
            // border: 1px solid red;
            padding-top: 30px;

            .bkRTopP {
                color: white;
                font-size: 32px;
                text-align: left;
                display: flex;
                align-items: center;
                font-weight: 300;

                .bkRIImg {
                    margin-left: 30px;
                }
            }

            .bkRBottomP {
                color: white;
                opacity: 0.7;
                font-size: 18px;
                text-align: left;
                display: flex;
                align-items: center;
                font-weight: 300;
                margin-top: 25px;

                .bkRBottomSpan {
                    color: #fae28e;
                }
            }

            .bkRSpan {
                color: #c5423e;
            }
        }
    }
}
</style>